<template>
  <a-modal
    title="修改头像"
    :visible="isVisible"
    :mask-closable="false"
    :confirm-loading="confirmLoading"
    :width="800"
    :footer="null"
    @cancel="cancelHandel">
    <a-row>
      <a-col :xs="24" :md="12" :style="{height: '350px'}">
        <vue-cropper
          ref="cropper"
          :img="options.img"
          :info="true"
          :auto-crop="options.autoCrop"
          :auto-crop-width="options.autoCropWidth"
          :auto-crop-height="options.autoCropHeight"
          :fixed-box="options.fixedBox"
          @real-time="realTime"
        >
        </vue-cropper>
      </a-col>
      <a-col :xs="24" :md="12" :style="{height: '350px'}">
        <div class="avatar-upload-preview">
          <img :src="previews.url" :style="previews.img"/>
        </div>
      </a-col>
    </a-row>
    <br>
    <a-row>
      <a-col :lg="2" :md="2">
        <a-upload name="file" :before-upload="beforeUpload" :show-upload-list="false">
          <a-button icon="upload">选择图片</a-button>
        </a-upload>
      </a-col>
      <a-col :lg="{span: 1, offset: 2}" :md="2">
        <a-button icon="plus" @click="changeScale(1)"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="minus" @click="changeScale(-1)"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="undo" @click="rotateLeft"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="redo" @click="rotateRight"/>
      </a-col>
      <a-col :lg="{span: 2, offset: 6}" :md="2">
        <a-button type="primary" @click="finish('blob')">保存</a-button>
      </a-col>
    </a-row>
  </a-modal>

</template>
<script lang="es6">
module.exports = asyncRequire([
  'vue-cropper',
  'mixins',
  'alias!@API/system/account'
], function(VueCropperDep, MXS, AccountAPIS, resolve, reject) {
  resolve({
    name: 'AvatarModal',
    mixins: [MXS.CommonMixin, MXS.ModalMixin],
    components: {
      VueCropper: VueCropperDep.VueCropper
    },
    props: {
      img: {
        type: String,
        required: true
      }
    },
    data () {
      return {
        id: null,
        confirmLoading: false,
        fileList: [],
        uploading: false,
        options: {
          img: '',
          autoCrop: true,
          autoCropWidth: 200,
          autoCropHeight: 200,
          fixedBox: true
        },
        previews: {}
      }
    },
    mounted () {
      this.options.img = this.img;
    },
    methods: {
      cancelHandel () {
        this.close()
      },
      changeScale (num) {
        num = num || 1
        this.$refs.cropper.changeScale(num)
      },
      rotateLeft () {
        this.$refs.cropper.rotateLeft()
      },
      rotateRight () {
        this.$refs.cropper.rotateRight()
      },
      beforeUpload (file) {
        const reader = new FileReader()
        // 把Array Buffer转化为blob 如果是base64不需要
        // 转化为base64
        reader.readAsDataURL(file);
        // reader.readAsArrayBuffer(file);
        reader.onload = () => {
          this.options.img = reader.result;
        }
        // 转化为blob
        // reader.readAsArrayBuffer(file)
        return false;
      },

      // 上传图片（点击上传按钮）
      finish (type) {
        // console.log('finish')
        const formData = new FormData();
        // 输出
        if (type === 'blob') {
          this.$refs.cropper.getCropBlob((data) => {
            const img = window.URL.createObjectURL(data)
            this.model = true;
            this.modelSrc = img;

            formData.append('file', data, 'newUserHeader.jpg');

            this.showLoading();
            AccountAPIS.uploadPicture(formData)
              .then(resp => AccountAPIS.modifyHeader(resp.sdata.name))
              .then(resp => {
                this.$message.success('修改成功');
                this.close({ $hook: true });
                this.visible = false;
              })
              .catch(resp => {
                this.$message.error(resp.message);
              }).finally(() => this.hideLoading());
          });
        } else {
          this.$refs.cropper.getCropData((data) => {
            this.model = true;
            this.modelSrc = data;
          });
        }
      },
      realTime (data) {
        this.previews = data;
      }
    }
  });
});
</script>

<style scoped>
.avatar-upload-preview {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;
}
.avatar-upload-preview img {
  width: 100%;
  height: 100%;
}
</style>
